  {{!-- <script>
    function selectTemplate(e){
      console.log(e)
      alert(1)
    }
    console.log(1)
    window.selectTemplate=selectTemplate
  </script>
   --}}
  <style>
#YHPAGE {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 999;
}
#YHPAGE .inner{
  overflow-y: scroll;
  width: 150px;
  transition: width .2s;
  z-index: 2;
}
#YHPAGE .child {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  position: relative;
}

#YHPAGE .child img {
  cursor: pointer;
  width: 120px;
  min-height:100px ;
}

#YHPAGE .child div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  cursor: pointer;
}

#previewWrapper{
  background:rgba(0,0,0,0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:3 ;
}
#previewImg{
  width: 50vw;
  padding: 20px;
}

.newPage{
  font-size: 45px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#toggleBar{
    position: absolute;
    /* z-index: 10000; */
    top: 50%;
    left: -20px;
    transform: translate(0,-50%);
    background-color: rgba(0, 0, 0, 0.3);
    width: 20px;
    height: 100px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    z-index: 2;
}

#page-modal{
  z-index: 2;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  flex-direction: column;
  display: none;
}

#page-modal>div{
  display: flex;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  flex-direction: column;
  position: relative;
}
#modal-confirm{
  background-color: #1890ff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
}

#modal-input{
    border: 1px solid #ddd;
    height: 25px;
    margin-right: 10px;
}
#modal-input:focus-visible{
  outline: none;
  border-color: #1890ff;
}
.modal-inner{
  display: flex;
}
#close{
  display: inline;
    position: absolute;
    right: 10px;
    top: 4px;
    cursor: pointer;
    color: #555;
}
</style>



<div id="YHPAGE">
  <div id="page-modal">
    <div>
    <div id="close"  onclick="onClose()">x</div>
    <p>确认生成<span id="tmpl"></span>？</p>
    <div class="modal-inner">
      <input type="text" id="modal-input" placeholder="请输入组件名" onchange="inputchange()">
      <div id="modal-confirm" onclick="onConfirm()">确定</div>
    </div>
    </div>
  </div>
  <div id="toggleBar" onclick="toggle()">></div>
    <div id="previewWrapper" style="display: none;">
      <img id="previewImg" src="{{preview}}" alt="" >
    </div>
    <div class="inner" id="YHPAGE_INNER">
  <div class="child newPage" title="生成新模板" onclick="goNewPage()">+</div>
  {{#each template}}
    <div class="child" onmouseout="clearPreviewImage()" onmouseover="zoomIn('{{pic}}')"  onclick="openModal('{{name}}')">
      <img src="{{pic}}" alt="" >
      <div>{{name}}</div>
    </div>
  {{/each}}
    </div>



</div>